<div th:fragment="control_chart_pyramid_2">
<script type="text/javascript">
	// 示例数据
	var get_pyramid_option = function()
	{
		return {
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					animation : false
				}
			},
			legend : {
				data : [ '男', '女' ],
				x : 'center'
			},
			color : [ "#02af6d", "#58abf9", "#d79de3", "#f9be58", "#b5ea7c", "#fa9c7d", "#01bc6f", "#60C0DD", "#D7504B", "#C6E579", "#F4E001", "#26C0C0" ],
			grid : [ {
				right : '50%',
				left : 50,
				top : 50,
				bottom : 30
			}, {
				left : '50%',
				right : 50,
				top : 50,
				bottom : 30
			} ],
			yAxis : [ {
				type : 'category',
				boundaryGap : true,
				axisLine : {
					onZero : false
				},
				name : "y轴",
				data : [ "10", "20", "30", "40", "50", "60", "70", "80", "90" ]
			}, {
				gridIndex : 1,
				type : 'category',
				boundaryGap : true,
				axisLine : {
					onZero : false
				},
				position : "right",
				data : [ "10", "20", "30", "40", "50", "60", "70", "80", "90" ]
			} ],
			xAxis : [ {
				name : 'x轴',
				inverse : true,
				type : 'value'
			}, {
				gridIndex : 1,
				name : 'x轴',
				type : 'value'
			} ],
			series : [ {
				name : '男',
				column : "SUMVALUE1",
				type : 'bar',
				symbolSize : 8,
				hoverAnimation : false,
				data : [ 13, 14, 15, 16, 17, 16, 15, 14, 12 ]
			}, {
				name : '女',
				column : "SUMVALUE2",
				type : 'bar',
				xAxisIndex : 1,
				yAxisIndex : 1,
				symbolSize : 8,
				hoverAnimation : false,
				data : [ 13, 14, 15, 16, 17, 16, 15, 14, 12 ]
			} ],
			sql : ""
		};
	}

	/** 柱状图元数据 */
	function metadata_pyramid(params)
	{
		var opt = get_pyramid_option();// 每个视图创建新的option，防止相互污染
		params = $.extend({}, {
			GRID : {},
			X_Y_AXIS : {},
			DATASET : {},
			OPTION : opt
		}, params);
		return $.extend(new metadata_chart_common(params), this);
	}

	/** 柱状图 元数据视图 面板视图 */
	function metadata_view_pyramid(control)
	{
		this.DATASET = function()
		{
			var view = $($("#DATASET").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			var series = option.series, sql = option.sql;

			var setDataSetDetail = function(s)
			{
				var name = s.name, type = s.type, column = s.column;
				var detail_view = $($("#DATASET_DETAIL").html());
				detail_view.find("input[name=title]").val(name);
				detail_view.find("select").val(type);
				detail_view.find("input[name=column]").val(column);
				return detail_view;
			}
			var getDataSetDeatil = function()
			{
				option.sql = $(view).find("textarea").val();
				$(view).find(".dataset_detail").each(function(i, item)
				{
					var n = $(item).find("input[name=title]").val();
					var c = $(item).find("input[name=column]").val();
					var t = $(item).find("select").val();
					$.extend(option.series[i], {
						name : n,
						column : c,
						type : t
					});
					option.legend.data[i] = n;
				});
			}

			$(view).find("textarea").val(sql);
			for ( var i in series)
			{
				$(view).append(setDataSetDetail(series[i]));
			}
			//增加按钮
			view.find(".add-btn").click(function()
			{
			});
			//系列名、字段名
			view.on("keyup", "input,textarea", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			//系列类型
			view.on("change", "select", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			//SQL执行按钮
			view.on("click", ".sql-btn", function()
			{
				var sql = $(view).find("textarea").val();
				queryChartBySql(sql, "pyramid", function(result)
				{
					if(result.state=="true"){
						option.yAxis[0].data = result.NAME;
						option.yAxis[1].data = result.NAME;
						for (var i in series){
							series[i].data = result[series[i].column];
						}
						_this.linkViewOption(option);
					}else{
						$.QuickAlert.alertFail({
							content:result.faultInfo
						});;
					}
				});
			});
			//删除按钮
			view.on("click", ".delete-btn", function()
			{
			});
			$(this.settingPanel).append(view);
		}
		this.X_Y_AXIS = function(value)
		{
			var view = $($("#X_Y_AXIS").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			$(view).find("input[name=xAxis]").val(option.xAxis[0].name);
			$(view).find("input[name=yAxis]").val(option.yAxis[0].name);
			$(view).find("input").keyup(function(){
				option.yAxis[0].name = $(view).find("input[name=yAxis]").val();
				option.yAxis[1].name = $(view).find("input[name=yAxis]").val();
				option.xAxis[0].name = $(view).find("input[name=xAxis]").val();
				option.xAxis[1].name = $(view).find("input[name=xAxis]").val();
				_this.linkViewOption(option);
			});
			$(this.settingPanel).append(view);
		}
		this.GRID = function()
		{
			var view = $($("#GRID").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			
			$(view).find("input[position=top]").val(option.grid[0].top).keyup(function(){
				option.grid[0].top = $(this).val();
				option.grid[1].top = $(this).val();
				_this.linkViewOption(option);
			});
			
			$(view).find("input[position=bottom]").val(option.grid[0].bottom).keyup(function(){
				option.grid[0].bottom = $(this).val();
				option.grid[1].bottom = $(this).val();
				_this.linkViewOption(option);
			});
			$(view).find("input[position=left]").val(option.grid[0].left).keyup(function(){
				option.grid[0].left = $(this).val();
				_this.linkViewOption(option);
			});
			$(view).find("input[position=right]").val(option.grid[1].right).keyup(function(){
				option.grid[1].right = $(this).val();
				_this.linkViewOption(option);
			});
			
			$(this.settingPanel).append(view);
		}
		return $.extend(new metadata_view_chart_common(control), this);
	}

	/** 柱状图 表单视图 */
	function metadata_form_view_pyramid(control)
	{
		return $.extend(new metadata_form_view_chart_common(control), this);
	}
</script>
</div>
